<template>
  <div class="Details">
    <div class="Enroll-panel">
      <div class="Enroll-title">
        <span>2023 CCF 全国电动汽车远程在线故障诊断技能大赛</span>
      </div>
      <div class="Enroll-title-two">
        <span>在线报名系统</span>
      </div>
      <div class="school-panel">
        <span>学 校 名 称 : </span>
        <span>{{ SchoolName }}</span>
      </div>
      <div class="teacher-title">
        <span class="teacher-title-span">指导老师信息</span>

        <el-button type="primary" @click="AddTeancher">增加教师</el-button>
        <!-- <el-button type="primary" @click="AddTeancher" v-show="TeacherCount < 3">增加教师</el-button> -->
      </div>
      <div class="teacher-panel">
        <el-table
          ref="singleTable"
          :data="TeacherData ? TeacherData : ''"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            property="name"
            label="教师姓名"
            max-width="21.6%"
          ></el-table-column>
          <el-table-column
            property="tel"
            label="固定电话"
            max-width="23.6%"
          ></el-table-column>
          <!-- <el-table-column property="school" label="学校" width="200"></el-table-column> -->
          <el-table-column
            property="phoneNumber"
            label="移动电话"
            max-width="21.6%"
          ></el-table-column>
          <el-table-column
            property="position"
            label="职务/职称"
            max-width="21.6%"
          ></el-table-column>
          <!-- <el-table-column
            property="qq"
            label="QQ"
            width="120"
          ></el-table-column>-->
          <el-table-column fixed="right" prop="option" label="操作按钮" max-width="11.6%">
            <template slot-scope="scope">
              <el-button
                type="info"
                class="teacher-Release"
                @click="TeacherRelease(scope.row, scope.$index)"
                >修改</el-button
              >
              <el-button
                type="danger"
                class="teacher-Edit"
                @click="TeacherDelete(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    
      <div class="student-title">
        <span class="student-title-span">选手信息(用于比赛报名及注册成为CCF会员)</span>
        <el-button type="primary" @click="AddStudent" v-show="StudentCount < 10">增加学生</el-button>
      </div>
      <div class="student-panel">
        <el-table
          ref="singleTable"
          :data="StudentData ? StudentData : ''"
          highlight-current-row
          style="width: 100%"
        >
        <!-- 姓名 -->
          <el-table-column
            property="name"
            label="学生姓名"
            max-width="21.6%"
          ></el-table-column>
          <!-- <el-table-column property="school" label="学校" width="200"></el-table-column> -->
          <!-- 性别 -->
          <el-table-column
            property="gender"
            label="性别"
            max-width="21.6%"
          ></el-table-column>
          <!-- 专业 -->
          <el-table-column
            property="major"
            label="专业"
            max-width="28.3%"
          ></el-table-column>
          <!-- 移动电话 -->
          <el-table-column
            property="phoneNumber"
            label="移动电话"
          ></el-table-column>
          <!-- 操作按钮 -->
          <el-table-column fixed="right" prop="option" label="操作按钮" max-width="29.5%">
            <template slot-scope="scope">
              <el-button
                type="info"
                class="student-Release"
                @click="StudentRelease(scope.row, scope.$index)"
                >修改</el-button
              >
              <el-button
                type="danger"
                class="student-Edit"
                @click="StudentDelete(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="btn-Sumbit">
        <el-button type="primary" @click="Exits">提交</el-button>
      </div>
      <div class="btn-Sumbit1">
        <!-- <el-button type="primary" @click="Exits">提交</el-button> -->
      </div>
      
    </div>
    
    <!-- 表单 -->
    <div class="StudentForm">
      <el-dialog
        title="学生信息"
        :visible.sync="StudentdialogFormVisible"
        :show-close="false"
        :close-on-click-modal="false"
        top="5vh"
      >
        <el-form :model="StudentForm" :rules="StudentRules" ref="StudentForm">
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
            <el-input
              v-model="StudentForm.name"
              autocomplete="off"
              placeholder="请输入姓名"
              type="text"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio v-model="StudentForm.gender" label="男">男</el-radio>
            <el-radio v-model="StudentForm.gender" label="女">女</el-radio>
          </el-form-item>

          <el-form-item label="专业" :label-width="formLabelWidth" prop="major">
            <el-input
              v-model="StudentForm.major"
              autocomplete="off"
              placeholder="请输入专业"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="学校"
            :label-width="formLabelWidth"
            prop="school"
          >
            <el-input v-model="StudentForm.school" autocomplete="off"></el-input>
          </el-form-item>-->
          <el-form-item
            label="移动电话"
            :label-width="formLabelWidth"
            prop="phoneNumber"
          >
            <el-input
              v-model="StudentForm.phoneNumber"
              autocomplete="off"
              placeholder="请输入移动电话"
              type="text"
              maxlength="11"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            label="身份证"
            :label-width="formLabelWidth"
            prop="identity"
          >
            <el-input
              v-model="StudentForm.identity"
              autocomplete="off"
              placeholder="请输入身份证号"
              type="text"
              maxlength="18"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            label="学生证"
            :label-width="formLabelWidth"
            prop="studentId"
          >
            <el-input
              v-model="StudentForm.studentId"
              autocomplete="off"
              placeholder="请输入学生证号"
              type="text"
              maxlength="20"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="eMail">
            <el-input
              v-model="StudentForm.eMail"
              autocomplete="off"
              placeholder="请输入邮箱"
              type="text"
              maxlength="18"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="学历" :label-width="formLabelWidth">
            <el-radio v-model="StudentForm.education" label="中职"
              >中职</el-radio
            >
            <el-radio v-model="StudentForm.education" label="高职"
              >高职</el-radio
            >
            <el-radio v-model="StudentForm.education" label="本科"
              >本科</el-radio
            >
          </el-form-item>

          <el-form-item
            label="毕业时间"
            :label-width="formLabelWidth"
            prop="graduationTime"
          >
            <el-input
              v-model="StudentForm.graduationTime"
              autocomplete="off"
              placeholder="请输入毕业时间,格式:XXXX(年)-XX(月)"
              type="text"
              maxlength="7"
              show-word-limit
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="指导教师" :label-width="formLabelWidth" prop="teacher">
            <el-input v-model="StudentForm.teacher" autocomplete="off" placeholder="请输入指导教师"></el-input>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="StudentCanel">取 消</el-button>
          <!-- <el-button @click="resetForm('StudentForm')">重置</el-button> -->
          <el-button type="primary" @click="StudentSumbit" v-preventReClick>确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div class="TeacherForm">
      <el-dialog
        title="教师信息"
        :visible.sync="TeacherdialogFormVisible"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <el-form :model="TeacherForm" :rules="TeacherRules" ref="TeacherForm">
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
            <el-input
              v-model="TeacherForm.name"
              autocomplete="off"
              placeholder="请输入姓名"
              type="text"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="固定电话"
            :label-width="formLabelWidth"
            prop="tel"
          >
            <el-input
              v-model="TeacherForm.tel"
              autocomplete="off"
              placeholder="请输入固定电话,格式XXXX XXXXXXXX"
              type="text"
              maxlength="13"
              show-word-limit
            ></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="学校"
            :label-width="formLabelWidth"
            prop="school"
          >
            <el-input
              v-model="TeacherForm.school"
              autocomplete="off"
            ></el-input>
          </el-form-item>-->
          <el-form-item
            label="移动电话"
            :label-width="formLabelWidth"
            prop="phoneNumber"
          >
            <el-input
              v-model="TeacherForm.phoneNumber"
              autocomplete="off"
              placeholder="请输入移动电话"
              type="text"
              maxlength="11"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="职务/职称"
            :label-width="formLabelWidth"
            prop="position"
          >
            <el-input
              v-model="TeacherForm.position"
              autocomplete="off"
              placeholder="请输入职务/职称"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="地址"
            :label-width="formLabelWidth"
            prop="address"
          >
            <el-input
              v-model="TeacherForm.address"
              autocomplete="off"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="邮编"
            :label-width="formLabelWidth"
            prop="postcode"
          >
            <el-input
              v-model="TeacherForm.postcode"
              autocomplete="off"
              placeholder="请输入邮编"
              type="text"
              maxlength="6"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="QQ" :label-width="formLabelWidth" prop="qq">
            <el-input
              v-model="TeacherForm.qq"
              autocomplete="off"
              placeholder="请输入QQ"
              type="text"
              maxlength="11"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="TeacherCanel">取 消</el-button>
          <el-button type="primary" @click="TeacherSumbit" v-preventReClick>确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 删除产品 -->
    <DialogComponent
      v-bind:msg="Dialogmsg"
      v-bind:centerDialogVisible="Dialogboolean"
      v-bind:speanstyles="Dialogstyle"
      v-bind:buttonstyle="buttonstyle"
      v-bind:buttonname="buttonname"
      @click="Deleteinformation"
    ></DialogComponent>
    <!-- 提交-->
    <DialogComponent
      v-bind:msg="SubmitDialogmsg"
      v-bind:centerDialogVisible="SubmitDialogboolean"
      v-bind:speanstyles="SubmitDialogstyle"
      v-bind:buttonstyle="Submitbuttonstyle"
      v-bind:buttonname="Submitbuttonname"
      @click="Submitinformation"
    ></DialogComponent>
    <div class="img-all-right">
      <div class="img-all-one">
        <img src="../assets/img/Q群.png">
      </div>
      <div class="img-all-two">
        <img src="../assets/img/QY群.png">
      </div>
    </div>

  </div>
</template>
<script>
import DialogComponent from "@/components/DialogComponent.vue";
import {
  postData,
  ObjectToString,
  isTimeClass,
  Identity,
  NumberVerification,
  deepClone,
  CharacterVerification,
  IponeVerification
} from "../assets/js/pubilcs.js";
export default {
  name: "Loding2",
  components: {},
  props: {},
  components: {
    DialogComponent,
  },
  directives: {
    // v-part
    preventReClick: {
      // 指令的定义
      inserted(el, binding) {
        // el.focus()
        // console.log('自定义局部指令注册成功！');
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, binding.value || 800);
          }
        });
      },
    },
  },
  data() {
    return {
      StudentRules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { validator: CharacterVerification, trigger: "blur" },
        ],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
        phoneNumber: [
          { required: true, message: "请输入移动电话", trigger: "blur" },
          { validator: NumberVerification, trigger: "blur" },
          { validator: IponeVerification, trigger: "blur" },
        ],
        identity: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: Identity, trigger: "blur" },
        ],
        studentId: [
          { required: true, message: "请输入学生证号", trigger: "blur" },
          { validator: NumberVerification, trigger: "blur" },
        ],
        eMail: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        graduationTime: [
          {
            required: true,
            message: "请输入毕业时间,格式:XXXX-XX",
            trigger: "blur",
          },
          { validator: isTimeClass, trigger: "blur" },
        ],
        // school:[{ required: true, message: "请输入学校名称", trigger: "blur" }]
      },
      TeacherRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" },
        { validator: CharacterVerification, trigger: "blur" },],
        tel: [{ required: true, message: "请输入固定电话", trigger: "blur" }],
        phoneNumber: [
          { required: true, message: "请输入移动电话", trigger: "blur" },
          { validator: NumberVerification, trigger: "blur" },
          { validator: IponeVerification, trigger: "blur" },
        ],
        position: [{ required: true, message: "请输入职务", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        postcode: [
          { required: true, message: "请输入邮编", trigger: "blur" },
          { validator: NumberVerification, trigger: "blur" },
        ],
        qq: [
          { required: true, message: "请输入QQ号", trigger: "blur" },
          { validator: NumberVerification, trigger: "blur" },
        ],
        // school:[{ required: true, message: "请输入学校名称", trigger: "blur" }]
      },
      Dialogmsg: "是否删除该信息?",
      Dialogboolean: false,
      Dialogstyle: {
        width: "100%",
        height: "30px",
        "font-size": "24px",
        "font-family": "Source Han Sans CN",
        "font-weight": "500",
        color: "#81859c",
        "line-height": "56px",
      },
      buttonstyle: {
        background: "#BF3434",
      },
      buttonname: "删除",

      SubmitDialogmsg: "提交成功",
      SubmitDialogboolean: false,
      SubmitDialogstyle: {
        width: "100%",
        height: "30px",
        "font-size": "24px",
        "font-family": "Source Han Sans CN",
        "font-weight": "500",
        color: "#81859c",
        "line-height": "56px",
      },
      Submitbuttonstyle: {
        background: "#409EFF",
      },
      Submitbuttonname: "确定",

      SchoolName: "",
      StudentdialogFormVisible: false,
      TeacherdialogFormVisible: false,
      TeacherData: [],
      StudentData: [],
      StudentForm: {
        name: "",
        school: "",
        role: "",
        tel: "",
        major: "",
        position: "",
        qq: "",
        phoneNumber: "",
        teacher: "",
        gender: "男",
        identity: "",
        studentid: "",
        email: "",
        graduationtime: "",
        address: "",
        postcode: "",
        education: "中职",
      },
      TeacherForm: {
        name: "",
        school: "",
        role: "",
        tel: "",
        major: "",
        position: "",
        qq: "",
        phoneNumber: "",
        teacher: "",
        gender: "男",
        identity: "",
        studentid: "",
        email: "",
        graduationtime: "",
        address: "",
        postcode: "",
        education: "中职",
      },
      formLabelWidth: "150px",
      StudentDeleteRow: "",
      StudentDeleteIndex: "",
      StudentReleaseIndex: "",
      StudentReleaseRow: "",
      StudentDeleteBoolean: false,
      StudentReleaseBoolean: false,
      StudentCount: 0,
      StudentAddBoolean: false,
      TeacherDeleteRow: "",
      TeacherDeleteIndex: "",
      TeacherReleaseIndex: "",
      TeacherReleaseRow: "",
      TeacherDeleteBoolean: false,
      TeacherReleaseBoolean: false,
      TeacherCount: 0,
      TeacherAddBoolean: false,
    };
  },
  methods: {
    GetAllinformation() {
      let self = this;
      let username = localStorage.getItem("username");
      self.SchoolName = localStorage.getItem("schoolname");
      postData(
        "/api/Registration/GetAllByNumber",
        JSON.stringify({ PhoneNumbers: username,Year:2023})
      )
        .then(function (res) {
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              if (res.result[i].role === "指导老师") {
                self.TeacherCount += 1;
                self.TeacherData.push(res.result[i]);
              } else if (res.result[i].role === "选手") {
                self.StudentCount += 1;
                self.StudentData.push(res.result[i]);
              }
            }
          }
        })
        .catch((error) => {});
    },
    UpdateAllinformation(NewArr, role) {
      let self = this;
      postData(
        "/api/Registration/Update",
        JSON.stringify({
          Id: NewArr.id,
          Name: NewArr.name,
          School: self.SchoolName,
          Role: NewArr.role,
          Tel: NewArr.tel,
          Major: NewArr.major,
          Position: NewArr.position,
          QQ: NewArr.qq,
          PhoneNumber: NewArr.phoneNumber,
          Teacher: NewArr.teacher,
          Gender: NewArr.gender,
          Identity: NewArr.identity,
          Studentid: NewArr.studentId,
          Email: NewArr.eMail,
          Education: NewArr.education,
          Graduationtime: NewArr.graduationTime,
          Address: NewArr.address,
          Postcode: NewArr.postcode,
        })
      )
        .then(function (res) {
          if (res.success) {
            if (role === "teacher") {
              self.TeacherdialogFormVisible = false;
              self.TeacherReleaseBoolean = false;
              // self.TeacherData[self.TeacherReleaseIndex] = res.result;
              self.$set(self.TeacherData,self.TeacherReleaseIndex,res.result)
            }
            if (role === "student") {
              self.StudentdialogFormVisible = false;
              self.StudentReleaseBoolean = false;
              self.$set(self.StudentData,self.StudentReleaseIndex,res.result)
              // self.StudentData[self.StudentReleaseIndex] = res.result;
            }
          }
        })
        .catch((error) => {});
    },
    DeleteAllinformation(NewArr, role) {
      let self = this;
      postData(
        "/api/Registration/Delete",
        JSON.stringify({
          Id: NewArr.id,
          Name: NewArr.name,
          School: self.SchoolName,
          Role: NewArr.role,
          Tel: NewArr.tel,
          Major: NewArr.major,
          Position: NewArr.position,
          QQ: NewArr.qq,
          PhoneNumber: NewArr.phoneNumber,
          Teacher: NewArr.teacher,
          Gender: NewArr.gender,
          Identity: NewArr.identity,
          Studentid: NewArr.studentId,
          Email: NewArr.eMail,
          Education: NewArr.education,
          Graduationtime: NewArr.graduationTime,
          Address: NewArr.address,
          Postcode: NewArr.postcode,
        })
      )
        .then(function (res) {
          if (res.success) {
            if (role === "teacher") {
              self.TeacherData.splice(self.TeacherDeleteIndex, 1);
              self.TeacherDeleteBoolean === false;
              self.Dialogboolean = false;
              self.TeacherCount -= 1;
            }
            if (role === "student") {
              self.StudentData.splice(self.StudentDeleteIndex, 1);
              self.TeacherDeleteBoolean === false;
              self.Dialogboolean = false;
              self.StudentCount -= 1;
            }
          }
        })
        .catch((error) => {});
    },
    AddAllinformation(NewArr, role) {
      let self = this;
      if (role === "teacher") {
        NewArr.role = "指导老师";
      }
      if (role === "student") {
        NewArr.role = "选手";
      }
      postData(
        "/api/Registration/Create",
        JSON.stringify({
          Id: NewArr.id,
          Name: NewArr.name,
          School: self.SchoolName,
          Role: NewArr.role,
          Tel: NewArr.tel,
          Major: NewArr.major,
          Position: NewArr.position,
          QQ: NewArr.qq,
          PhoneNumber: NewArr.phoneNumber,
          Teacher: NewArr.teacher,
          Gender: NewArr.gender,
          Identity: NewArr.identity,
          Studentid: NewArr.studentId,
          Email: NewArr.eMail,
          Education: NewArr.education,
          Graduationtime: NewArr.graduationTime,
          Address: NewArr.address,
          Postcode: NewArr.postcode,
          Year:2023,
        })
      )
        .then(function (res) {
          if (res.success) {
            // console.log(res);
            if (role === "teacher") {
              // console.log("执行了teacher");
              self.TeacherData.push(res.result);
              self.TeacherdialogFormVisible = false;
              self.TeacherCount += 1;
              self.TeacherAddBoolean = false;
            }
            if (role === "student") {
              // console.log("执行了student");
              self.StudentData.push(res.result);
              self.StudentdialogFormVisible = false;
              self.StudentCount += 1;
              self.StudentAddBoolean = false;
            }
          }
        })
        .catch((error) => {});
    },
    SchoolBlur(e) {
      if (this.SchoolName === "") {
        // e.target.style.border="1px solid red"
        e.target.focus();
      } else {
        e.target.style.border = "1px solid #DCDFE6";
      }
    },
    SchoolFocus(e) {
      e.target.style.border = "1px solid #409EFF";
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      let self = this;
      let submitFormbooelan = false;
      self.$refs[formName].validate((valid) => {
        if (valid) {
          submitFormbooelan = true;
        } else {
          console.log("请重新输入");
          return false;
        }
      });
      return submitFormbooelan;
    },
    AddTeancher() {
      this.TeacherdialogFormVisible = true;
      this.TeacherForm = {
        name: "",
        school: "",
        role: "",
        tel: "",
        major: "",
        position: "",
        qq: "",
        phoneNumber: "",
        teacher: "",
        gender: "男",
        identity: "",
        studentId: "",
        eMail: "",
        graduationTime: "",
        address: "",
        postcode: "",
        education: "中职",
      };
    },
    AddStudent() {
      this.StudentdialogFormVisible = true;
      this.StudentForm = {
        name: "",
        school: "",
        role: "",
        tel: "",
        major: "",
        position: "",
        qq: "",
        phoneNumber: "",
        teacher: "",
        gender: "男",
        identity: "",
        studentId: "",
        eMail: "",
        graduationTime: "",
        address: "",
        postcode: "",
        education: "中职",
      };
    },
    StudentSumbit() {
      if (this.StudentReleaseBoolean) {
        if (this.submitForm("StudentForm")) {
          this.UpdateAllinformation(this.StudentForm, "student");
        }
      } else {
        if (this.submitForm("StudentForm")) {
          if (this.StudentAddBoolean === true) {
            return;
          }
          this.StudentAddBoolean = true;
          this.AddAllinformation(this.StudentForm, "student");
        }
      }
    },
    StudentCanel() {
      this.resetForm("StudentForm");
      this.StudentdialogFormVisible = false;
      this.$set(
        this.StudentData,
        this.StudentReleaseIndex,
        this.StudentReleaseRow
      );
      // console.log(this.StudentData);
    },
    TeacherSumbit() {
      if (this.TeacherReleaseBoolean) {
        if (this.submitForm("TeacherForm")) {
          this.UpdateAllinformation(this.TeacherForm, "teacher");
        }
      } else {
        if (this.submitForm("TeacherForm")) {
          this.AddAllinformation(this.TeacherForm, "teacher");
        }
      }
    },
    TeacherCanel() {
      this.resetForm("TeacherForm");
      this.TeacherdialogFormVisible = false;
      this.$set(
        this.TeacherData,
        this.TeacherReleaseIndex,
        this.TeacherReleaseRow
      );
      // console.log(this.TeacherData);
    },
    TeacherRelease(scope, index) {
      this.TeacherdialogFormVisible = true;
      this.TeacherReleaseBoolean = true;
      this.TeacherReleaseIndex = index;
      this.TeacherReleaseRow = deepClone(scope);
      this.TeacherForm = scope;
    },
    TeacherDelete(scope, index) {
      this.Dialogboolean = true;
      this.TeacherDeleteBoolean = true;
      this.TeacherDeleteIndex = index;
      this.TeacherDeleteRow = scope;
    },
    StudentRelease(scope, index) {
      this.StudentdialogFormVisible = true;
      this.StudentReleaseBoolean = true;
      this.StudentReleaseIndex = index;
      this.StudentReleaseRow = deepClone(scope);
      this.StudentForm = scope;
    },
    StudentDelete(scope, index) {
      this.Dialogboolean = true;
      this.StudentDeleteBoolean = true;
      this.StudentDeleteIndex = index;
      this.StudentDeleteRow = scope;
    },
    Deleteinformation(fn) {
      if (fn === "Cancel") {
        this.Dialogboolean = false;
        this.resetForm("StudentForm");
      }
      if (fn === "centerDialogVisible") {
        this.Dialogboolean = false;
      }
      if (fn === "Ready") {
        if (this.TeacherDeleteBoolean === true) {
          this.DeleteAllinformation(this.TeacherDeleteRow, "teacher");
        }
        if (this.StudentDeleteBoolean === true) {
          this.DeleteAllinformation(this.StudentDeleteRow, "student");
        }
      }
    },
    Submitinformation(fn) {
      let self = this;
      if (fn === "Cancel") {
        self.SubmitDialogboolean = false;
      }
      if (fn === "centerDialogVisible") {
        self.SubmitDialogboolean = false;
      }
      if (fn === "Ready") {
        self.SubmitDialogboolean = false;
      }
    },
    Exits() {
      this.SubmitDialogboolean = true;
    },
  },
  created() {
    this.GetAllinformation();
  },
  mounted() {},
};
</script>
<style spcoed lang="less">
.Details {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
  overflow-y: auto;
}

.Details::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.Details::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #888;
}

.Details::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #F8F8F8;
}


.Details .cell {
  text-align: center;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
  font-size: 16px;
}
.Enroll-panel {
  position: relative;
  width: 1200px;
  height: 600px;
}
.Enroll-title {
  position: absolute;
  top: -140px;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
.Enroll-title-two {
  position: absolute;
  top: -80px;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  margin-bottom: 20px;
}
.school-panel {
  width: 100%;
  height: 60px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.school-panel span {
  margin-right: 15px;
}
.school-panel > span:nth-child(1) {
  font-size: 20px;
}
.school-panel > span:nth-child(2) {
  font-size: 20px;
}
.school-panel .el-input {
  width: 80%;
  font-size: 18px;
}
.teacher-title,
.student-title {
  width: 100%;
  height: 60px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(85, 92, 136, 0.1);
}
.teacher-title .teacher-title-span,
.student-title .student-title-span {
  margin-left: 15px;
  font-size: 20px;
}
.teacher-title .el-button,
.student-title .el-button {
  position: absolute;
  right: 20px;
}
.teacher-panel .el-button,
.student-panel .el-button {
  padding: 10px 10px;
}
.student-panel,
.teacher-panel {
  margin-top: 10px;
  margin-bottom: 10px;
}
.StudentForm .el-dialog,
.TeacherForm .el-dialog {
  width: 600px;
  border-radius: 20px;
}
.StudentForm .el-dialog {
  height: 850px;
}
.TeacherForm .el-dialog {
  height: 650px;
}
.TeacherForm .el-form-item__label,
.StudentForm .el-form-item__label {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
}
.TeacherForm .el-dialog__title,
.StudentForm .el-dialog__title {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
}

.TeacherForm .el-button,
.StudentForm .el-button {
  width: 200px;
  height: 60px;
  margin-right: 60px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  border-radius: 10px;
}

.StudentForm .el-dialog__footer,
.TeacherForm .el-dialog__footer {
  position: absolute;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 30px;
}
.dialog-footer .el-button:nth-child(1) {
  background: #81859c;
  color: aliceblue;
}
.TeacherForm .el-input,
.StudentForm .el-input {
  width: 350px;
}

.btn-Sumbit {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 998;
  width: 100%;
  height: 60px;
}
.btn-Sumbit1 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 120px;
}
.btn-Sumbit .el-button {
  margin-top: 20px;
  padding: 20px 40px;
}
.img-all-right{
  position: absolute;
  width: 400px;
  height: 100vh;

  flex-wrap: wrap;
}
.img-all-one{
  position:fixed;
  top: 250px;
  right: 60px;
  width: 220px;
  height: 200px;
}
.img-all-two{
  position:fixed;
  width: 220px;
  height: 200px;
  right: 52px;
  top: 470px;
}

// .img-all-four{
//   position:fixed;
//   width: 220px;
//   height: 200px;
//   top: 600px;
//   margin-top: 10px;
//   margin-left: 35px;
// }
.img-all-one img
{
   width: auto;
   height: auto;
   margin: auto;
   max-width: 80%;
   max-height: 100%;
}
.img-all-two img{
  width: auto;
   height: auto;
   margin: auto;
   max-width: 65%;
   max-height: 100%;
}

</style>
